<template>
  <div class="consult">
    <header></header>
    <main>
        <dl>
            <dt>
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=550143682,2677936680&fm=26&gp=0.jpg" alt="">
            </dt>
            <dd>
                你还，请详细描述您的病情，我们将会安排适合得到医生为你服务
            </dd>
        </dl>
        <div class="fast">
            <p>您也可以点击标签快速回答：</p>
            <ul  @click="clean($event)">
                <li>感冒咳嗽</li>
                <li>头痛头晕</li>
                <li>过敏</li>
                <li>胃疼</li>
                <li>肚子疼</li>
                <li>妇科问题</li>
                <li>高血压</li>
                <li>糖尿病</li>
            </ul>
        </div>
    </main>
    <footer>
        <p >
            <input class="search" type="text" v-model="inp" placeholder="描述越细，推荐越准，至少两个字">
            <button class="sending">发送</button>
        </p>
        <p class="way">
            <span><van-icon name="chat-o"></van-icon>曾经问过</span>
            <span><van-icon name="phone-o"></van-icon>语音输入</span>
            <span><van-icon name="photo-o"></van-icon>传入图片</span>
        </p>
    </footer>
  </div>
</template>

<script>
// import {drugShop} from '@/api/drugShop.js'
export default {
    name: 'consult',
    data(){
        return {
            inp:''
        }
    },
    created(){

    },
    methods:{
        clean(event){
            
        }
    }
    
}
</script>

<style>
.consult{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.consult header{
    width: 100%;
    height: 0.6rem;
    background: #fff;
}

.consult main{
    flex: 1;
    overflow: auto;
    background: #eaeeef;
}
.consult main dl{
    display: flex;
    margin:0.2rem;
}
.consult main dt img{
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
}
.consult main dd{
    width: 75%;
    background: #fff;
    border-radius: 0px 0.45rem 0.45rem 0.45rem;
    padding: 0.1rem;
    font-size: 0.16rem;
    margin-left: 0.1rem;
}

.consult main .fast p{
    margin:0.2rem;
    color:#84c0f7
}
.consult main .fast ul li{
    float: left;
    margin:0.1rem 0.2rem 0.1rem 0.2rem;
    color:#84c0f7;
    height: 0.2rem;
    background: #fff;
    padding:0.05rem 0.07rem 0.05rem 0.07rem;
    justify-content: space-around;
    align-items: center;
    display: flex;
    border-radius: 0.2rem;
    font-size: 0.16rem;
}

.consult footer{
    width: 100%;
    height: 1rem;
    background: #fff;
    justify-content: space-around;
    align-items: center;
}
.consult footer .search{
    width: 60%;
    height: 0.45rem;
    margin:0.15rem;
    border-radius: 0.45rem;
    background: #f6f7f9;
    border:none;
    padding-left: 0.2rem;
    color:#c0c0c0
}
.consult footer .sending{
    width: 20%;
    height: 0.45rem;
    border-radius: 0.45rem;
    color:#727272;
    font-size: 14px;
    border:1px solid #979797;
    margin-left: 0.15rem;
    background: #fff;
}
.consult footer .way{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size:18px;
}
</style>